<template>
	<view class="tabbar_box">
		<view class="weui-tabbar b_t" :class="{'adh':isSystemPhoneX}">
			<!-- <uni-popup ref="addItems" zindex class="uni-propun-con" type="bottom" :isShow="isShow"
				@maskClick="maskClick">
				<view class="comProModal">
				 	<view class="tit text-bold">
				 		我要添加
				 	</view>
					<view class="nav_list flex align-center">
						<view v-for="(item,index) in compList" :key="index" class="nlItem" @click="tabChange(index,item,'pop')">
							<view class="img">
								<image class="image" :src="item.iconPath" mode="aspectFit"></image>
							</view>
							<view class="dis text-center padding-top">
								{{item.name}}
							</view>
						</view>
					</view>
				 </view>
			</uni-popup> -->
			<view @click="tabChange(index,item)" v-for="(item, index) in tabbarList" :key="index" class="weui-tabbar__item"
			 :class="{'phonex':isSystemPhoneX,'weui-bar__item_on':item.pagePath === thisCurrent}">
				<!-- 中间+号暂不需 'center_item':(tabbarList.length>4 && index==2)-->
				<!-- <block v-if="tabbarList.length>4 && index==2">
					<view class="weui-center_box">
						<text class="cuIcon-add"></text>
					</view>
					<view class="cen_dis text-center">
						中间项
					</view>
					暂移除分享
					<view class="weui-center_box">
						<text class="cuIcon-add" :class="[thisCurrent==='pages/index/bloodItem/bloodItem'&&subNavClass===0?'xcon-tiaoguofenxiang':'cuIcon-add']"></text>
					</view>
					<view class="cen_dis text-center">
						{{thisCurrent==='pages/index/bloodItem/bloodItem'&&subNavClass===0?'分享':'加一笔'}}
					</view>
				</block> -->
				
				<view class="weui-bar__box">
					<image :src="thisCurrent === item.pagePath ? item.selectedIconPath : item.iconPath" 
					 :backgroundImage="'url('+thisCurrent === item.pagePath ? item.selectedIconPath : item.iconPath+')'"
					 class="weui-tabbar__icon n_img" mode="aspectFit"
					 @error="handleErrorImgsrc(item,thisCurrent,index)"
					 ></image>
					 <!-- v-if="(tabbarList.length<=4) || (tabbarList.length>4 && index!=2)" -->
					<view class="weui-tabbar__label">{{ item.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref,onBeforeMount } from 'vue'
	import mApi from "@/utils/mapi";
	import global from '@/utils/global'
	import { getSystemPhoneX,showLoading, hideLoading, mnavTo } from '@/utils/helper';

	const props = defineProps({
		list: {
			type: Array,
			default: function() {
				return []
			}
		}, 
		subNavClass:{
			trype:Number,
			default:0
		},
		thisCurrent: {
			type: String,
			default: ""
		}
	});
	// fileUrl: '',
	// parmas: {
	// 	sellMemberId: '',
	// 	vbus_code: 'B803',
	// },
	// indexFlag: 0,
	// extClass: '',
	
	// const current = ref(0);
	const tabbarList = ref<any>([]);
	const isSystemPhoneX = ref<any>('');
	const defaultList = [
					{
						"pagePath": "pages/index/home/home",
						"iconPath": "/static/tab-home.png",
						"selectedIconPath": "/static/tab-home-current.png",
						"text": "首页"
					},
					{
						"pagePath": "pages/index/menu/menu",
						"iconPath": "/static/tab-cate.png",
						"selectedIconPath": "/static/tab-cate-current.png",
						"text": "点餐" //搜索
					},
					{
						"pagePath": "pages/index/order/order",
						"iconPath": "/static/tab-cart.png",
						"selectedIconPath": "/static/tab-cart-current.png",
						"text": "订单" //搜索
					},
					{
						"pagePath": "pages/index/user/user",
						"iconPath": "/static/tab-my.png",
						"selectedIconPath": "/static/tab-my-current.png",
						"text": "我的"
					}]
	onBeforeMount(()=>{
		isSystemPhoneX.value = getSystemPhoneX();
		console.log('phoneType',isSystemPhoneX.value)
		getTabBarList()
	})	
	const getTabBarList = ()=>{
		tabbarList.value = JSON.parse(JSON.stringify(defaultList));
	}
	const tabChange = (index:any, item:any,source:any='')=> {
		if (item.pagePath == props.thisCurrent) {
			return;
		}
		if(item.type&&(item.type=='929'||item.type=='modal')){
			let isLogin = uni.getStorageSync(global.IS_LOGIN)||'';
			if(!isLogin&&!global.CENTER_LOGIN_PAGE){
				global.CENTER_LOGIN_PAGE = true; 
				console.log('onlaunch进入登录页面1+')
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return;
			}
			// if(item.type=='modal'){
			// 	this.$refs.addItems.show()
			// 	// 暂移除分享
			// 	// this.thisCurrent==='pages/index/bloodItem/bloodItem'&&this.subNavClass===0?this.$emit('onExport'):this.$refs.addItems.show()
			// 	return
			// }
			isLogin&&mnavTo(item.pagePath,true);
			// if(source==='pop'){
			// 	setTimeout(()=>{
			// 		this.$refs.addItems.hide()
			// 	},300)
			// }
			
			
		}else{
			uni.switchTab({url:'/' + item.pagePath});
		}
	}
	// getTabBarList() {
	// 	this.tabbarList = JSON.parse(JSON.stringify(this.defaultList));
	// },
	const handleErrorImgsrc = (item, current, index)=> {
		let active = (current == item.pagePath);
		let pagePathName="";
		let arr = item.pagePath.split("?");
		if(arr.length>1){
			pagePathName = arr[0]
		};
		pagePathName = item.pagePath.split("/").pop().split("?")[0];
		let src = "/static/tab-" + pagePathName
		if (active) {
			src = src + "-current.png"
			tabbarList.value[index].selectedIconPath = src
			// this.$set(this.tabbarList[index],"selectedIconPath",src)
		} else {
			src = src + ".png"
			tabbarList.value[index].iconPath = src
			// this.$set(this.tabbarList[index],"iconPath",src)
		}
	}
	// const replaceActiveImgSrc = (src)=> {
	// 	let newSrc = "";
	// 	let srcArr = src.split(".");
	// 	srcArr[srcArr.length - 2] = srcArr[srcArr.length - 2] + "_active.";
	// 	newSrc = srcArr.join("").replace(/trade/g,'upload')
	// 	return newSrc
	// }
	
</script>

<style lang="scss" scoped>
	.comProModal{
		min-height: 420rpx;
		padding: 30rpx 40rpx;
		.nav_list{
			padding-top: 80rpx;
		}
		.nlItem{
			width: 100rpx;
			margin-right: 38rpx;
			&:nth-last-child(1){
				margin-right: 0;
			}
		}
		.img{
			width: 100%;
			height: 100rpx;
			border-radius: 50%;
			background: #fff;
			box-shadow: 0px 0px 20rpx rgba(76, 162, 123, 0.15);
		}
		.image{
			width: 100%;
			height: 100rpx;
			border-radius: 50%;
		}
	}
	.weui-center_box{
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
		background-color: $view-act;//#255ED6
		position: absolute;
		left: 50%;
		top: -45rpx;
		z-index: 9999;
		line-height: 113rpx;
		text-align: center;
		transform: translateX(-50%);
		cursor: pointer;
		box-shadow: 0px 8rpx 20rpx rgba(76, 162, 123, 0.3);
		.cuIcon-add{
			color: #fff;
			font-size: 50rpx;
			font-weight: bold;
		}
	}
	.cen_dis{
		position: absolute;
		left: 0;
		top: 70rpx;
		width: 100%;
		height: 30rpx;
		line-height: 31rpx;
		color: #bfbfbf;
		z-index: 9999;
		font-size: 20rpx;
	}
	.tabbar_box {
		width: 100vw;
		position:fixed;
		bottom:0;
		left:0;
		right:0;
		z-index:9998;
		box-shadow: 0px 19rpx 68rpx 0px rgba(84, 85, 84, 0.16);
	}

	.weui-tabbar {
		display: flex;
		position: relative;
		background-color: #fff;
		height: 110rpx;//90
		&.adh{
			height: 140rpx;//130
			// padding-bottom: 40rpx;
		}
	}

	.height30 {
		height: 50rpx;
		background-color: #fff;
	}

	.no-bg {
		// box-shadow:0px -10px 10px 0px rgba(84,85,84,0.15);
		background-size: cover;
		background-position: top center;
		height: 90rpx;
		background-repeat: no-repeat;

	}
.weui-bar__box{
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
}
	.tabbar-bg {
		background: url('https://static.xiaokangjun.com/resouces/icon/xz2.png');
		background-size: 750rpx 120rpx;
		background-position: top center;
		height: 120rpx;
		background-repeat: no-repeat;
	}
	.weui-tabbar__item {
		position: relative;
		flex: 1;
		cursor: pointer;
		font-size: 0;
		color: rgba(0, 0, 0, 0.5);
		text-align: center;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		&.phonex{
			padding-bottom: 40rpx;
		}
	}

	.tabbar-bg .weui-tabbar__item {
		margin-top: 44rpx;
	}
	.weui-tabbar__item:first-child {
		padding-left: constant(safe-area-inset-left);
		padding-left: env(safe-area-inset-left);
	}
	.weui-tabbar__item:last-child {
		padding-right: constant(safe-area-inset-right);
		padding-right: env(safe-area-inset-right);
	}
	.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon,
	.weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i,
	.weui-tabbar__item.weui-bar__item_on .weui-tabbar__label {
		color: $text-act;//#1853D0
	}
	.weui-tabbar__icon {
		display: inline-block;
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 0rpx;
	}

	.full-bg-img {
		width: 100%;
		height: 100%;
	}
	.full-bg-img .weui-tabbar__icon {
		width: 100rpx;
		height: 100rpx;
	}

	i.weui-tabbar__icon,
	.weui-tabbar__icon>i {
		font-size: 24px;
		color: rgba(0, 0, 0, 0.5);
	}
	.weui-tabbar__icon .n_img {
		width: 100%;
		height: 100%;
	}

	.weui-tabbar__item.center_item .n_img {
		width: 80rpx;
		height: 80rpx;
	}
	.weui-tabbar__label {
		color: #bfbfbf;
		font-size: 12px;
		line-height: 1.4;
	}
</style>
